{% extends 'base.html' %}
{% block content %}
    <h3>数据添加</h3>
    <div><hr></div>
    <div class="data-add">
    {% if metal.id %}
        <form action="/metal_update_btn/" method="post" enctype="multipart/form-data">
        {% else %}
        <form action="/add_btn_submit/" method="post" enctype="multipart/form-data">
    {% endif %}
            <ul class="ul">
                <li class="clearfix">
                    <label>事故名称 : </label>
                    <div>
                        <input type="hidden" name="id"  value="{{ metal.id}}">
                        <input type="text" name="name" value="{{metal.accident}}">
                    </div>
                </li>
                <li class="clearfix">
                    <label>重金属类型 : </label>
                    <div>
                        <select class="mr30" name="metal_type" onchange="metalTypeSel(this)">
                            <option value="">--请选择--</option>
                            {% for temp_metal in metal_list  %}
                                {% ifequal temp_metal.kind metal.metal_kind %}
                                    <option value="{{temp_metal.kind}}" selected="true">{{ temp_metal.value }}</option>
                                {% else %}
                                    <option value="{{ temp_metal.kind }}">{{ temp_metal.value}}</option>
                                {% endifequal %}
                            {% endfor %}
                        </select>
                        <input style="display:none;"  type="text" name="metal_kind" class="small-input" value="{{metal.kind}} "  placeholder="请输入金属类型">
                    </div>
                </li>
                <li class="clearfix">
                    <label>时间 : </label>
                    <div class="date-pick">
                        <input id="datepicker" readonly type="text" name="time" value="{{metal.time }}" >
                    </div>
                </li>
                <li class="clearfix">
                    <label>事故地点 : </label>
                    <div>
                        <select id="cmbProvince" class="mr20" name="cmbProvince"></select>
                        <select id="cmbCity" class="mr20" name="cmbCity"></select>
                        <select id="cmbArea"name="cmbArea" ></select>
                    </div>
                    {% if prov_name and city_name and area_name %}
                        <script type="text/javascript">
                        function selectRegion($select_ele,region_name)
                        {
                            $select_ele.val(region_name).trigger('change');
                        }
                        $(function(){
                            selectRegion($('#cmbProvince'),'{{ prov_name }}');
                            selectRegion($('#cmbCity'),'{{ city_name }}');
                            selectRegion($('#cmbArea'),'{{ area_name }}');
                        });

                        </script>
                    {% endif %}
                </li>

                <li class="clearfix">
                    <label>行业类型 :</label>
                    <div>
                        <select onchange="industryTypeSel(this)" class="mr20" name="occupation_standard" >
                            <option value="">--请选择--</option>
                           {% for industry in industry_list %}
                               {% ifequal metal.occupation_standard industry.kind %}
                                   <option value="{{industry.kind}}" selected="true">{{industry.value}}</option>
                                   {% else %}
                                   <option value="{{industry.kind }}"> {{industry.value}}</option>
                               {% endifequal %}
                            {% endfor %}
                        </select>
                        <input style="display:none;" class="small-input" value="{{metal.occupation_standard}}" type="text" name="occupation_standard_auto" placeholder="请输入行业类型">
                    </div>
                </li>
                <li class="clearfix">
                    <label>受体类型 : </label>
                    <div>
                        <select onchange="receptorTypeSel(this)" class="mr20" name="viticm_kind" id="viticm_kind">
                            <option value="">--请选择--</option>
                            <option value="1" >第一类</option>
                            <option value="2" >第二类</option>
                            <option value="3" >第三类</option>
                        </select>
                        <select class="mr20" name="viticm_kind_name" id="viticm_kind.name">
                            <option>--请选择--</option>
                        </select>
                        <input class="small-input" style="display:none;" type="text"  value=" {{ metal.viticm_kind_count}}" name="viticm_kind_count"  placeholder="请输入受害人数">
                    </div>
                </li>
                <li class="clearfix">
                    <label>事故后果描述 : </label>
                    <div>
                        <textarea rows="5" name="accident_description" >{{metal.accident_description}}</textarea>
                    </div>
                </li>

                <li class="clearfix">
                    <label>污染源控制措施 : </label>
                    <div>
                        <textarea rows="5" name="pollution_measure" >{{measure.pollution_measure  }}</textarea>
                    </div>
                </li>
                <li class="clearfix">
                    <label>环境污染清除措施 : </label>
                    <div>
                        <textarea rows="5" name="environment_measure"  >{{measure.environment_measure  }}</textarea>
                    </div>
                </li>
                <li class="clearfix">
                    <label>人群健康保障措施 : </label>
                    <div>
                        <textarea rows="5" name="crowd_measure" >{{measure.crowd_measure  }}</textarea>
                    </div>
                </li>
                <li class="clearfix">
                    <label>信息发布与风险交流 : </label>
                    <div>
                        <textarea rows="5" name="information_measure" >{{measure.information_measure  }}</textarea>
                    </div>
                </li>
                <li class="clearfix">
                    <label>事后损害评估与修复措施 : </label>
                    <div>
                        <textarea rows="5" name="after_measure" >{{measure.after_measure  }}</textarea>
                    </div>
                </li>
                <li class="clearfix">
                    <label>处罚及法律制裁 : </label>
                    <div>
                        <textarea rows="5" name="law_measure" >{{measure.law_measure  }}</textarea>
                    </div>
                </li>
                <li class="clearfix">

                    <label>事故图片 : </label>
                    <div>
                        <div class="imageUpload fl">
                           {% if metal %}
                            {% for image in images %}
                                <div class="fileinput fileinput-exists" data-provides="fileinput"><input type="hidden">
                                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;" data-trigger="fileinput">
                                        <img src="http://placehold.it/200x150" alt="...">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 120px; line-height: 6px;">
                                        <img src="/medias/{{ image.image }}" alt="...">
                                    </div>
                                    <div>
                                            <span class="btn-white btn-file">
                                                <span class="btn fileinput-new">上传图片</span>
                                                <input style="width: 120px;" class="fileinput-exists" name="imagename" type="text" value="{{ image.imagename }}"disabled="disabled" placeholder="输入图片名称" />
                                                <input type="file" name="image" accept="image/*">
                                                <input type="hidden" value="{{ image.image }}" name="oldImage">
                                            </span>
                                        <a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput">删除</a>
                                    </div>
                                </div>
                            {% endfor %}
                               {% else %}
                                   <div class="fileinput fileinput-new" data-provides="fileinput"><input type="hidden">
                                       <div class="fileinput-new thumbnail" style="width: 128px; height: 120px;" data-trigger="fileinput">
                                           <img src="http://placehold.it/200x150" alt="...">
                                       </div>
                                       <div class="fileinput-preview fileinput-exists thumbnail" style="width: 128px; max-height: 120px; line-height: 6px;"></div>
                                       <div>
                                                <span class="btn-white btn-file">
                                                    <span class="btn fileinput-new">上传图片</span>
                                                    <input style="width: 120px;" class="fileinput-exists" name="imagename" type="text" placeholder="输入图片名称" />
                                                    <span class="btn fileinput-exists">修改</span>
                                                    <input type="file" name="image" accept="image/*">
                                                </span>
                                           <a href="#" class="btn btn-orange fileinput-exists" data-dismiss="fileinput">删除</a>
                                       </div>
                                   </div>
                         {% endif %}
                        </div>
                        <div class="imageUpload fl ml5">
                            <input class="addFileBtn" onclick="addFile(this)" type="button" value="继续上传">
                        </div>
                        <script type="text/javascript" src="/static/js/upload.js" ></script>
                    </div>

                </li>
                <li class="clearfix">
                    <label>新闻链接 : </label>
                    <div class="urlAdd">
                        <input class="addFileBtn" onclick="urlAdd(this)" type="button" value="继续上传">
                        {% if metal %}
                            {% for news in news %}
                                <input name="news_link"  class="clearfix mb5" type="text"  value="{{news.news_link}}">

                            {% endfor %}
                         {% else %}
                            <input name="news_link"  class="clearfix mb5" type="text">
                        {% endif %}
                    </div>
                    <script type="text/javascript" src="/static/js/upload.js" ></script>
                </li>
                <li class="clearfix">
                    <label>选取位置 : </label>
                    <div>
                        <input class="small-input mr20" type="text" placeholder="经度" name="longitude" value="{{ metal.longitude }}" readonly>
                        <input class="small-input" type="text" placeholder="纬度"  name="latitude" value="{{ metal.latitude }}"  readonly>
                    </div>
                </li>
                <li class="clearfix">
                    <div class="sel-place">
                        <input type="button" onclick="toolbar.activate(esri.toolbars.Draw.POINT);mymap.graphics.clear()" value="选取位置坐标">
                        <div class="mapDiv">
                            <div data-dojo-type="dijit.layout.BorderContainer" design="headline" gutters="false" style="position:relative;width:100%; height:700px;">
                                <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden; height:700px;">
                                    <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="submit-btn"><input type="submit" value="提 交"></div>
        </form>
    </div>
{% endblock %}
{% block js %}
<script type="text/javascript" src="http://192.168.1.251:8080/arcgis_js_api/library/3.1/jsapi/init.js"></script>
<script type="text/javascript" src="/static/js/mapAction_add.js"></script>
{% endblock %}
